import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../controllers/main_screen_controller.dart';
import '../../home/views/home_view.dart';
import '../../category/views/category_view.dart';
import '../../app_settings/views/app_settings_view.dart';
import '../../../utils/screen_adapter.dart';

class MainScreenView extends GetView<MainScreenController> {
  const MainScreenView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 初始化屏幕适配
    ScreenAdapter.init(context);

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark.copyWith(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
      ),
      child: Scaffold(
        body: Obx(() => _buildBody()),
        bottomNavigationBar: _buildBottomNavigationBar(),
      ),
    );
  }

  // 构建主体内容
  Widget _buildBody() {
    switch (controller.currentIndex.value) {
      case 0:
        return const HomeView();
      case 1:
        return const CategoryView();
      case 2:
        return const AppSettingsView();
      default:
        return const HomeView();
    }
  }

  // 构建底部导航栏
  Widget _buildBottomNavigationBar() {
    return Obx(
      () => Container(
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.1),
              blurRadius: 10.r,
              offset: Offset(0, -2.h),
            ),
          ],
        ),
        child: SafeArea(
          child: Container(
            padding: ScreenAdapter.padding(
                horizontal: 16.h, vertical: 8.w), // 添加适当的垂直padding
            constraints: BoxConstraints(minHeight: 60.h), // 使用最小高度约束
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                _buildNavItem(
                  index: 0,
                  icon: Icons.home_outlined,
                  activeIcon: Icons.home,
                  label: '首页',
                ),
                _buildNavItem(
                  index: 1,
                  icon: Icons.category_outlined,
                  activeIcon: Icons.category,
                  label: '分类',
                ),
                _buildNavItem(
                  index: 2,
                  icon: Icons.settings_outlined,
                  activeIcon: Icons.settings,
                  label: '设置',
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  // 构建导航项
  Widget _buildNavItem({
    required int index,
    required IconData icon,
    required IconData activeIcon,
    required String label,
  }) {
    final isActive = controller.currentIndex.value == index;

    return GestureDetector(
      onTap: () => controller.changeTabIndex(index),
      behavior: HitTestBehavior.opaque,
      child: Container(
        padding: ScreenAdapter.padding(
            horizontal: 12.h, vertical: 4.w), // 减少垂直padding
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            AnimatedSwitcher(
              duration: const Duration(milliseconds: 200),
              child: Icon(
                isActive ? activeIcon : icon,
                key: ValueKey(isActive),
                size: 24.r,
                color: isActive ? _getActiveColor() : _getInactiveColor(),
              ),
            ),
            SizedBox(height: 4.h),
            Text(
              label,
              style: TextStyle(
                fontSize: 12.sp,
                fontWeight: isActive ? FontWeight.w600 : FontWeight.w400,
                color: isActive ? _getActiveColor() : _getInactiveColor(),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 获取激活状态颜色
  Color _getActiveColor() {
    return const Color(0xffd43ae0); // 游戏主题绿色
  }

  // 获取非激活状态颜色
  Color _getInactiveColor() {
    return const Color(0xFF9E9E9E); // 灰色
  }
}
